<template>
  <div class="flex flex-row gap-[32px]">
    <div class="flex flex-col w-[100px] border border-solid border-black">
      <div class="flex flex-row justify-center">
        <div :class="{ 'text-red-500': downKey.includes('KeyW') }">W</div>
      </div>
      <div class="flex flex-row justify-between">
        <div :class="{ 'text-red-500': downKey.includes('KeyA') }">A</div>
        <div :class="{ 'text-red-500': downKey.includes('KeyD') }">D</div>
      </div>
      <div class="flex flex-row justify-center">
        <div :class="{ 'text-red-500': downKey.includes('KeyS') }">S</div>
      </div>
    </div>
    <div class="flex flex-col w-[150px] border border-solid border-black">
      <div class="flex flex-row justify-start gap-[40px] pl-[60px]">
        <div :class="{ 'text-red-500': downKey.includes('KeyI') }">I</div>
        <div :class="{ 'text-red-500': downKey.includes('KeyO') }">O</div>
      </div>
      <div class="flex flex-row justify-start pl-[20px]">
        <div :class="{ 'text-red-500': downKey.includes('KeyU') }">U</div>
      </div>
      <div class="flex flex-row justify-start gap-[40px]">
        <div :class="{ 'text-red-500': downKey.includes('KeyH') }">H</div>
        <div :class="{ 'text-red-500': downKey.includes('KeyJ') }">J</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { io } from 'socket.io-client'
import { onBeforeMount, onMounted, ref, shallowRef, toValue } from 'vue'
const socketRef = shallowRef()
let downKey = ref([])

let timer = null

const emitMoveMsg = (t1, t2, n = 200) => {
  window.clearTimeout(timer)

  timer = setTimeout(() => {
    emitMoveMsgMessage(t1, t2);
  }, n);
}

const emitMoveMsgMessage = (t1, t2) => {
  socketRef.value?.emit(t1, t2);
}

const onKeyDown = e => {
  const downKeyValue = toValue(downKey)
  if (downKeyValue.includes(e?.code)) {
    return
  }

  downKey.value.push(e?.code)

  if (downKeyValue.includes('KeyW') && downKeyValue.includes('KeyA')) {
    emitMoveMsgMessage('action', 'move-up-left');
  } else if (downKeyValue.includes('KeyW') && downKeyValue.includes('KeyD')) {
    emitMoveMsgMessage('action', 'move-up-right');
  } else if (downKeyValue.includes('KeyS') && downKeyValue.includes('KeyA')) {
    emitMoveMsgMessage('action', 'move-down-left');
  } else if (downKeyValue.includes('KeyS') && downKeyValue.includes('KeyD')) {
    emitMoveMsgMessage('action', 'move-down-right');
  } else if (downKeyValue.includes('KeyW')) {
    emitMoveMsgMessage('action', 'move-up');
  } else if (downKeyValue.includes('KeyS')) {
    emitMoveMsgMessage('action', 'move-down');
  } else if (downKeyValue.includes('KeyA')) {
    emitMoveMsgMessage('action', 'move-left');
  } else if (downKeyValue.includes('KeyD')) {
    emitMoveMsgMessage('action', 'move-right');
  } else if (downKeyValue.includes('KeyJ')) {
    emitMoveMsgMessage('action', 'attack-j');
  } else if (downKeyValue.includes('KeyH')) {
    emitMoveMsgMessage('action', 'attack-h');
  } else if (downKeyValue.includes('KeyU')) {
    emitMoveMsgMessage('action', 'attack-u');
  } else if (downKeyValue.includes('KeyI')) {
    emitMoveMsgMessage('action', 'attack-i');
  } else if (downKeyValue.includes('KeyO')) {
    emitMoveMsgMessage('action', 'attack-o');
  }
}

const onKeyUp = e => {
  downKey.value.splice(downKey.value.indexOf(e?.code), 1)
  const downKeyValue = toValue(downKey)

  if (downKeyValue.length === 0) {
    emitMoveMsgMessage('action', 'stop');
  }
}

const delay = async (n = 1000) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, n);
  })
}

const loopRunLeft = async () => {
  onKeyDown({ code: 'KeyA' })
  await delay(200)

  onKeyUp({ code: 'KeyA' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)
}

const loopRunRight = async () => {
  onKeyDown({ code: 'KeyD' })
  await delay(200)

  onKeyUp({ code: 'KeyD' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)
}

const loopRunUp = async () => {
  onKeyDown({ code: 'KeyW' })
  await delay(2000)

  onKeyUp({ code: 'KeyW' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)
}

const loopRunDown = async () => {
  onKeyDown({ code: 'KeyS' })
  await delay(2000)

  onKeyUp({ code: 'KeyS' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)

  onKeyDown({ code: 'KeyJ' })
  await delay(200)

  onKeyUp({ code: 'KeyJ' })
  await delay(200)
}

const loopRun = async () => {
  // await loopRunLeft()
  // await loopRunLeft()
  // await loopRunLeft()
  // await loopRunLeft()
  // await loopRunLeft()
  // await loopRunRight()
  // await loopRunRight()
  // await loopRunRight()
  // await loopRunRight()
  // await loopRunRight()
  await loopRunUp()
  await loopRunUp()
  await loopRunUp()
  await loopRunUp()
  await loopRunDown()
  await loopRunDown()
  await loopRunDown()
  await loopRunDown()
  loopRun()
}

onMounted(() => {
  const socket = io('http://192.168.1.19:3000', {
    // retries: 1
  })
  socket.on('connect', () => {
    console.log('Connected to server');

    // 发送消息给服务器
    // socket.emit('client message', { a: 1, b: 2 });

    // loopRun()
  });

  socket.on('disconnect', () => {
    console.log('Disconnected from server');
  });

  socketRef.value = socket

  document.addEventListener('keydown', onKeyDown)
  document.addEventListener('keyup', onKeyUp)
})

onBeforeMount(() => {

  document.removeEventListener('keypress', onKeyDown)
  document.removeEventListener('keyup', onKeyUp)
  socketRef.value?.close()
})
</script>
<style lang="scss" scoped></style>